<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            //<![CDATA[
var dropbox;
var playlist;

function init() {
    dropbox = document.getElementById("canPGM");
    dropbox.addEventListener("dragenter", dragenter, false);
    dropbox.addEventListener("dragover", dragover, false);
    dropbox.addEventListener("drop", drop, false);
}

function dragenter(e) {
    e.stopPropagation();
    e.preventDefault();
}

function dragover(e) {
    e.stopPropagation();
    e.preventDefault();
}

function drop(e) {
    e.stopPropagation();
    e.preventDefault();

    var dt = e.dataTransfer;
    var file = dt.files[0];

    handleFile(file);
}

function handleFile(file) {
    playlist = new tgd.Tools.Playlist(file);
}

var tgd = tgd || {};
tgd.Tools = tgd.Tools || {};

tgd.Tools.Playlist = function (file) {

    var _shows = new Array();
    var _episodes = new Array();

    this.__defineGetter__("Shows", function() { return _shows; });
    this.__defineGetter__("Episodes", function() { return _episodes; });

    var reader = new FileReader();
    reader.readAsText(file);
    reader.onloadend = function(event) {
        $($.parseXML(reader.result)).find("media").each(function(index) {
            var fullpath = $(this).attr("src");
            var showname = fullpath.match(/.*?\\/)[0];

            var isNewShow = true;
            _shows.forEach(function(show) { if (show == showname) { isNewShow = false; } });
            if (isNewShow) {
                _shows.push(showname);
            }

            var locationOfShow = _shows.indexOf(showname);
            _episodes[locationOfShow] = _episodes[locationOfShow] || new Array();
            _episodes[locationOfShow].push(fullpath);
        });

        _episodes.forEach(function(episodelist) { episodelist.sort(); } );
        _episodes.sort(function(a, b) { return b.length - a.length; } );

        var maxNumShows = _episodes[0].length;
        var counter = 0;

        $("#output").empty();
        while (counter < maxNumShows) {
            for (var i = 0; i < _episodes.length; ++i) {
                if (counter < _episodes[i].length) {
                    $("#output").append('&lt;media src="' + _episodes[i][counter].replace(/&/, "&amp;amp;").replace(/'/, "&amp;apos;") + '" /&gt;<br />');
                }
            }
            ++counter;
        }
    }
}

    //]]>
        </script>
        <style type="text/css">
            html{height:100%}
            body{height:100%;margin:0;padding:0;}

            canvas:-moz-drag-over{border-color: #a4c639;}
            #panCanvasHolder{text-align:center;position:absolute;top:0; right:0;width:25px; height:25px;background:#0f0;z-index:2;}
            canvas{height:100%;width:100%;}
        </style>
    </head>
    <body onload="init();">
        <div id="panCanvasHolder">
            <canvas id="canPGM"></canvas>
        </div>
        <div id="output">
        </div>
    </body>
</html>
